<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/haha.js"></script>
</head>
<body>

  <div id="app">
      <el-container style="height: 500px; border: 1px solid #eee">

          <el-header style="text-align: right; font-size: 12px">
              <el-dropdown>
                  <i class="el-icon-setting" style="margin-right: 15px"></i>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>查看</el-dropdown-item>
                      <el-dropdown-item>新增</el-dropdown-item>
                      <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
              <span>王小虎</span>
          </el-header>

          <el-container>
              <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                  <el-menu >
                      <el-submenu v-for="(item,index) in permissionInfo" :index="item.id.toString()">
                          <template slot="title"><i :class="item.icon"></i>{{item.pname}}</template>
                          <el-menu-item-group>
                              <el-menu-item v-for="(subItem,isubIndex) in item.subMenu" @click="addTab(subItem)"   :index="subItem.id.toString()">
                                  {{subItem.pname}}
                              </el-menu-item>
                          </el-menu-item-group>
                      </el-submenu>
                  </el-menu>
              </el-aside>
              <el-main>
                  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                      <el-tab-pane
                              v-for="(item, index) in editableTabs"
                              :key="item.id"
                              :label="item.pname"
                              :name="item.id"
                      >
                          <iframe :src="item.url" width="100%" height="600px"></iframe>
                      </el-tab-pane>
                  </el-tabs>
              </el-main>
          </el-container>
      </el-container>
  </div>
  <script>

      $.get(BASE_URL+"/emp/getInfo",function(backData){
           app.userInfo = backData.data.userInfo;
           app.permissionInfo = backData.data.permissionInfo;
      });
      var app = new Vue({
          el:"#app",
          data:{
              editableTabsValue: '2',
              userInfo:{},
              permissionInfo:[],
              editableTabs:[]
          },
          methods:{
              addTab(item) {
                  if(this.editableTabs.indexOf(item) < 0  ){
                      this.editableTabs.push(item);
                  }
                  this.editableTabsValue = item.id;
              },
              removeTab(targetName) {
                  let tabs = this.editableTabs;
                  let activeName = this.editableTabsValue;
                  if (activeName === targetName) {
                      tabs.forEach((tab, index) => {
                          if (tab.id === targetName) {
                              let nextTab = tabs[index + 1] || tabs[index - 1];
                              if (nextTab) {
                                  activeName = nextTab.id;
                              }
                          }
                      });
                  }

                  this.editableTabsValue = activeName;
                  this.editableTabs = tabs.filter(tab => tab.id !== targetName);
              }
          }

      });


  </script>



</body>
</html>